<template>
  <div class="container">
    <div>
      基本属性
    </div>
    <div class="line"></div>
    <div class="flex_row">
      <div class="row">
        <div class="font">
          <span style="color: red">*</span>学员姓名：
        </div>
        <div>
          <el-input
              
              v-model="info.studentName"
              placeholder="请输入学员姓名"
              clearable
              size="small"
            />
        </div>
      </div>
      <div class="row">
        <div class="font">
          <span style="color: red">*</span>性别：{{info.sexs}}
        </div>
        <div>
          <el-select v-model="info.sex" placeholder="请选择学员性别" >
            <el-option
              v-for="item in sexList"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="flex_row">
      <div class="row">
        <div class="font">
          <span style="color: red">*</span>手机号：
        </div>
        <div>
          <el-input
              v-model="info.phonenumber"
              placeholder="请输入手机号"
              clearable
              size="small"
              
            />
        </div>
      </div>
      <div class="row">
        <div class="font">
          民族：
        </div>
        <div>
          <el-input
              v-model="info.nation"
              placeholder="请输入名族"
              clearable
              size="small"
              
            />
        </div>
      </div>
    </div>
    <div class="flex_row">
      <div class="row">
        <div class="font">
          <span style="color: red">*</span>身份证号：
        </div>
        <div>
          <el-input
              v-model="info.identificationCard"
              placeholder="请输入身份证号"
              clearable
              size="small"
              
            />
        </div>
      </div>
      <div class="row">
        <div class="font">
          <span style="color: red">*</span>学历：
        </div>
        <div>
          <el-select v-model="info.education" placeholder="请选择学历" >
            <el-option
              v-for="item in educationList"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="font">
        工作年限：
      </div>
      <div>
        <el-input
            v-model="info.workYear"
            placeholder="请输入工作年限"
            clearable
            
          />
      </div>
    </div>
    <div class="row">
      <div class="font">
        工作单位：
      </div>
      <div>
        <el-input
            style="width:650px"
            v-model="info.work"
            placeholder="请输入工作单位"
            clearable
            
          />
      </div>
    </div>
    <div>
      报考属性
    </div>
    <div class="line"></div>
    <div class="row">
      <div class="font">
        <span style="color: red">*</span>报考级别：
      </div>
      <div>
        <el-select v-model="info.testLevel" placeholder="请选择报考级别" >
          <el-option
            v-for="item in levelList"
            :key="item.key"
            :label="item.value"
            :value="item.key"
          ></el-option>
        </el-select>
        <!-- <el-input
          v-model="info.testLevel"
          placeholder="请输入报考级别"
          clearable
        /> -->
      </div>
      <div class="font">
        <span style="color: red">*</span>报考方向：
      </div>
      <div>
        <!-- <el-input
            v-model="info.testDirection"
            placeholder="请输入报考方向"
            clearable
            
          /> -->
        <el-select v-model="info.testDirection" placeholder="请选择报考方向" >
          <el-option
            v-for="item in directList"
            :key="item.key"
            :label="item.value"
            :value="item.key"
          ></el-option>
        </el-select>
      </div>
    </div>
    <div class="row">
      <div class="font">
        应收：
      </div>
      <div>
        <el-input
            v-model="info.receivable"
            clearable
            
          />
      </div>
      <div class="font">
        实收：
      </div>
      <div>
        <el-input
            v-model="info.receipts"
            clearable
            
          />
      </div>
    </div>
    <div class="row">
      <div class="font">
        推荐人：
      </div>
      <div>
        <el-input
            v-model="info.reference"
            placeholder="请输入推荐人"
            clearable
            
          />
      </div>
    </div>
    <div class="footer">
      <el-button @click="back()">返回</el-button>
      <el-button type="primary" @click="submit()">提交</el-button>
    </div>
  </div>
</template>

<script>
import { studentDetail, studentEdit } from "@/api/system/user";
export default {
  components: {
   
  },
  data() {
    return {
      info: '',
      sexList: [
        {key: '0', value: '男'},
        {key: '1', value: '女'},
        {key: '2', value: '未知'}
      ],
      educationList: [
        {key: '1', value: '博士及以上'},
        {key: '2', value: '硕士'},
        {key: '3', value: '本科'},
        {key: '4', value: '专科'},
        {key: '5', value: '高中'},
        {key: '6', value: '其他'}
      ],
      levelList: [
        { key: '1', value: '初级' },
        { key: '2', value: '中级' }, 
        { key: '3', value: '高级' }, 
        { key: '4', value: '技师（暂未开放）' }
      ],
      directList: [
        { key: '1', value: '监控方向' },
        { key: '2', value: '维保方向' }, 
      ]
    }
  },
  created() {
  },
  mounted(){
    this.init(this.$route.query.id)
  },
  methods: {
    init(id) {
      studentDetail(id).then(res => {
        if (res.code == 200) {
          this.info = res.data
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    back() {
      this.$router.push('studentList')
    },
    submit() {
      let params = {
        userId: this.$route.query.id,
        studentName: this.info.studentName,
        sex: this.info.sex,
        phonenumber: this.info.phonenumber,
        nation: this.info.nation,
        identificationCard: this.info.identificationCard,
        education: this.info.education,
        work: this.info.work,
        workYear: this.info.workYear,
        testLevel: this.info.testLevel,
        testDirection: this.info.testDirection,
        reference: this.info.reference,
        receivable: this.info.receivable,
        receipts: this.info.receipts
      }
      studentEdit(params).then(res => {
        if (res.code == 200) {
          this.$message({ message: res.msg, type: "success" });
          this.$router.push('studentList')
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    }
  }
}
</script>
<style scoped>
  .container {
    padding-left: 26px;
    padding-right: 24px;
    padding-top: 24px;
  }
  .row {
    display:flex;
    padding-bottom: 20px;
  }
  .line {
    height: 1px;
    background: #DCDFE6;
    width: 100%;
    margin-top: 6px;
    margin-bottom: 20px;
  }
  .row .font {
    width: 200px;
    text-align: right;
    margin-right: 20px;
  }
  .row .fonts {
    width: 300px;
    text-align: right;
    margin-right: 20px;
  }
  .flex_row {
    display: flex;
  }
  .footer {
    width: 540px;
    text-align: right;
    margin-top: 40px
  }
</style>
